<script setup lang="ts"></script>

<template>
  <div class="border shadow rounded hover:shadow-md">
    <header class="text-lg font-bold p-3 text-gray-600">
      <!-- 具名插槽 -->
      <slot name="header">头部区域</slot>
    </header>
    <main class="min-h-[8rem] border-y p-3">
      <!-- 默认插槽 -->
      <slot>内容区域</slot>
    </main>
    <footer class="text-sm text-gray-600 p-3 font-light">
      <!-- 具名插槽 -->
      <slot name="footer">底部区域</slot>
    </footer>
  </div>
</template>

<style scoped></style>
